<template>
    <view class="custom-navbar">
        <view class="navbar-left" @click="goBack">
            <text class="navbar-back">←</text>
        </view>
        <view class="navbar-title">
            <text class="navbar-title-text">{{ title }}</text>
        </view>
        <view class="navbar-right">
            <text class="navbar-right-text">{{ rightText }}</text>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface Props {
    // 导航栏标题
    title?: string;
    // 导航栏右侧文本
    rightText?: string;
}

const props = withDefaults(defineProps<Props>(), {
    title: '',
    rightText: ''
});

const emit = defineEmits<{
    goBack: []
}>();

const goBack = () => {
    emit('goBack');
};
</script>

<style scoped>
/* 自定义导航栏样式 */
.custom-navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 44px !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    padding: 0 16px !important;
    z-index: 1000 !important;
    border-bottom: 1px solid #eeeeee !important;
}

.navbar-left {
    width: 60px !important;
    display: flex !important;
    align-items: center !important;
}

.navbar-back {
    font-size: 20px !important;
    font-weight: bold !important;
    color: #333333 !important;
}

.navbar-title {
    flex: 1 !important;
    text-align: center !important;
}

.navbar-title-text {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #333333 !important;
}

.navbar-right {
    width: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.navbar-right-text {
    font-size: 14px !important;
    color: #666666 !important;
}
</style>
